<template>
    <div>
          <el-table
            :data="tableData"
            style="width: 100%">

            <el-table-column
            label="商品ID"
            width="70">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.id }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品详情"
            width="120">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <router-link :to="'/detail?category='+scope.row.category+'&id='+scope.row.id" style="color:black">
                        <img :src="require('@/assets/'+scope.row.category+'/'+scope.row.id+'/1.jpg')" style="width: 100px; height: 100px"><br>
                    </router-link>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品分类"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.category }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品标题"
            width="500">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品价格"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.price }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="购买人数"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.buyer }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="库存数量"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.stock }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="当前状态"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'checking'">
                    <el-tag size="medium">审核中</el-tag>
                </div>
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'ok'">
                    <el-tag size="medium">审核通过</el-tag>
                </div>
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'no'">
                    <el-tag size="medium">审核不通过</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除商品</el-button>
            </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
export default {
    name:"products",
    data() {
      return {
        tableData: []
      }
    },

    methods: {
      handleDelete(row) {
            this.$axios.post("/api/deleteShop",this.$querystring.stringify({
            id:row.id,
            category:row.category
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               alert("删除成功")
            }else{
                alert("系统错误")
            }
        })
      }
    },

    mounted(){
        this.$axios.get("/api/getShopProduct?name="+this.$cookies.get("shopname")).then(res=>{
            console.log(res.data);
            this.tableData = res.data
        });
    }
}
</script>